<template>
    <div class="edu-page-warp">
        <condition-card @reset="reset" @search="onSubmit" label-width="110px">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.grade')">
                        <el-date-picker
                            clearable
                            v-model="queryForm.currentGrade"
                            value-format="yyyy"
                            type="year"
                            :placeholder="$t('common.text.all')"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.college')">
                        <el-select
                            v-model="queryForm.faculty"
                            style="width: 100%;"
                            @change="changeFaculty"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.college"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.major')">
                        <el-select
                            v-model="queryForm.profession"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.major"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingLevel')">
                        <el-select
                            v-model="queryForm.trainingLevel"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.trainingCategory')">
                        <el-select
                            v-model="queryForm.trainingCategory"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.trainingCategory"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('dic.degreeType')">
                        <el-select
                            v-model="queryForm.degreeType"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.degreeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.formLearning')">
                        <el-select
                            v-model="queryForm.formLearning"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.formLearning"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.isOverseas')">
                        <el-select
                            v-model="queryForm.isOverseas"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.isOverseas"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('stuRegister.registType')">
                        <el-select
                            v-model="queryForm.registType"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.registType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.leaveSchool')">
                        <el-select
                            v-model="queryForm.leaveSchool"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.leaveSchool"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('stuRegister.paymentStatus')">
                        <el-select
                            v-model="queryForm.paymentStatus"
                            style="width: 100%;"
                            clearable
                            :placeholder="$t('common.text.all')"
                        >
                            <el-option
                                v-for="item in options.paymentStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注册开始时间">
                        <el-date-picker
                            clearable
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width:100%"
                            v-model="queryForm.operationStartTime"
                            type="datetime"
                            placeholder="注册开始时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注册结束时间">
                        <el-date-picker
                            clearable
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width:100%"
                            v-model="queryForm.operationEndTime"
                            type="datetime"
                            placeholder="注册结束时间"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <div class="edu-page-title">注册日志列表</div>
            <el-row style="margin-bottom:16px">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        @keyup.enter.native="onSubmit"
                        style="width:200px"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="onSubmit"
                        ></i>
                    </el-input>
                </el-col>
                <el-col :span="20">
                    <div class="float-right">
                        <el-button type="primary" @click="handleExport">{{$t('message.export')}}</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                :data="students"
                size="mini"
                style="width:100%"
                :order="false"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
                :selection="false"
            >
                <el-table-column :label="$t('label.stuCode')" fixed show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.studentId }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.stuName')" fixed show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column :label="$t('label.grade')" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.currentGrade }}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('label.college')"
                    width="150"
                    show-overflow-tooltip
                    prop="facultyI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.major')"
                    width="150"
                    show-overflow-tooltip
                    prop="professionI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.trainingLevel')"
                    width="120"
                    show-overflow-tooltip
                    prop="trainingLevelI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.trainingCategory')"
                    width="120"
                    show-overflow-tooltip
                    prop="trainingCategoryI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('dic.degreeType')"
                    width="120"
                    show-overflow-tooltip
                    prop="degreeTypeI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.formLearning')"
                    width="120"
                    prop="formLearningI18n"
                ></el-table-column>
                <el-table-column :label="$t('label.isOverseas')" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isOverseas=='1'">{{scope.row.isOverseasI18n}}</el-tag>
                        <el-tag v-else type="info">{{scope.row.isOverseasI18n}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    :label="$t('stuRegister.registType')"
                    show-overflow-tooltip
                    prop="registTypeI18n"
                    width="100"
                ></el-table-column>
                <el-table-column
                    :label="$t('label.leaveSchool')"
                    width="120"
                    show-overflow-tooltip
                    prop="leaveSchoolI18n"
                ></el-table-column>
                <el-table-column
                    :label="$t('stuRegister.paymentStatus')"
                    show-overflow-tooltip
                    width="100"
                >
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.paymentStatus!='0'?'info':null"
                        >{{getPaymentStatusText(scope.row.paymentStatus)}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('label.operateTime')" width="170" show-overflow-tooltip>
                    <template slot-scope="scope">{{getFormatDate(scope.row.operationTime)}}</template>
                </el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">{{scope.row.operationMethodI18n}}</template>
                </el-table-column>
                <el-table-column
                    :label="$t('stuRegister.operator')"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.operator == null"></span>
                        <span
                            v-if="scope.row.operator != null"
                        >{{ scope.row.operator + '(' + scope.row.operatorName + ')' }}</span>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { registeredLogList, exportRegisteredLog } from "common/src/api/studentRegister";
export default {
    name: "StudentRegisterLog",
    data() {
        return {
            queryForm: {
                currentGrade: null,
                faculty: null,
                profession: null,
                trainingLevel: null,
                trainingCategory: null,
                degreeType: null,
                formLearning: null,
                isOverseas: null,
                registType: null,
                leaveSchool: null,
                paymentStatus: null,
                operationStartTime: null,
                operationEndTime: null,
                keyWord: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            options: {
                college: [],
                major: [],
                trainingLevel: [],
                trainingCategory: [],
                degreeType: [],
                formLearning: [],
                isOverseas: [],
                registType: [],
                leaveSchool: [],
                paymentStatus: [
                    { value: 1, label: "未缴费" },
                    { value: 0, label: "已缴费" },
                    { value: 2, label: "缓缴" }
                ]
            },
            students: null
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_PYCC",
                    "X_PYLB",
                    "X_YX",
                    "X_XXXS",
                    "X_XWLX",
                    "isAborad",
                    "K_ZCFS",
                    "K_ZXZT"
                ]
            };
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            trainingLevel: "X_PYCC",
                            trainingCategory: "X_PYLB",
                            college: "X_YX",
                            formLearning: "X_XXXS",
                            isOverseas: "isAborad",
                            degreeType: "X_XWLX",
                            leaveSchool: "K_ZXZT",
                            registType: "K_ZCFS"
                        },
                        res.data,
                        this.options
                    );
                }
            });
            this.onSubmit();
        },
        reset() {
            this.queryForm.currentGrade = null;
            this.queryForm.faculty = null;
            this.queryForm.profession = null;
            this.queryForm.trainingLevel = null;
            this.queryForm.trainingCategory = null;
            this.queryForm.degreeType = null;
            this.queryForm.formLearning = null;
            this.queryForm.isOverseas = null;
            this.queryForm.registType = null;
            this.queryForm.leaveSchool = null;
            this.queryForm.paymentStatus = null;
            this.queryForm.operationStartTime = null;
            this.queryForm.operationEndTime = null;
            this.queryForm.keyWord = null;
            this.onSubmit();
        },
        onSubmit() {
            registeredLogList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.students = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        changeFaculty() {
            this.options.major = [];
            this.queryForm.profession = null;
            if (this.queryForm.faculty == null) return;
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [this.queryForm.faculty],
                    specilaCode: "XY2ZY",
                    facultys: [this.queryForm.faculty],
                    grade: this.queryForm.currentGrade,
                    degreeType: this.queryForm.degreeType
                        ? [this.queryForm.degreeType]
                        : []
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect({ major: "G_ZY" }, res.data, this.options);
            });
        },
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit();
        },
        getFormatDate(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        },
        handleExport() {
            window.open(exportRegisteredLog(this.queryForm));
        },
        getPaymentStatusText(val) {
            let p = this.options.paymentStatus.find(p => p.value == val);
            return p ? p.label : null;
        }
    }
};
</script>